import React, { useState, useImperativeHandle, useEffect, useCallback, useRef } from "react";

import { Modal, Descriptions } from 'antd'
import {FCTable} from "@components";
import DetailsTable from "../components/derailsTable";

import styles from "../styles/details.module.css";
import { DetailsModelBodyHeight } from "../config";

const Details = ({detailsRef}) => {
  const [open, setOpen] = useState(false)
  const [height, setHeight] = useState(0);
  const [infoData, setInfoData] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setTimeout(()=>{
        setHeight(node.getBoundingClientRect().height);
      },0)
    }
  }, []);
  
  // 暴露给父组件的方法
  useImperativeHandle(detailsRef, () => ({
    showDetails: (data) => {
      setInfoData(data)
      setOpen(true)
    },
  }))
  
  return (
    <Modal
      title='详情'
      // className={styles.district}
      centered
      open={open}
      footer={null}
      onCancel={() => {
        setOpen(false)
      }}
      width={900}
      bodyStyle={{height: `${DetailsModelBodyHeight}px`}}
      destroyOnClose={true}
    >
      <div ref={measuredRef} className={styles.info}>
        <div className={styles.info_item}>
          <span className={styles.label}>应急事项：</span>
          <span className={styles.value}>{infoData.emerName}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>消息标题：</span>
          <span className={styles.value}>{infoData.title}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>消息总量：</span>
          <span className={styles.value}>{infoData.msgCount}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>消息状态：</span>
          <span className={styles.value}>{infoData.sendStatusName}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>发送时间：</span>
          <span className={styles.value}>{infoData.sendTime}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>审核状态：</span>
          <span className={styles.value}>{infoData.auditStatusName}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>消息内容：</span>
          <span className={styles.value}>{infoData.content}</span>
        </div>
        <div className={styles.info_item}>
          <span className={styles.label}>审核描述：</span>
          <span className={styles.value}>{infoData.auditDesc}</span>
        </div>
      </div>
      <Descriptions title='客户列表:' column={1}>
        <Descriptions.Item>
          <DetailsTable height={height} msgCustMainId={infoData.msgCustMainId}/>
        </Descriptions.Item>
      </Descriptions>
    </Modal>
  );
};

export default React.memo(Details);
